<html style="height: 100%">
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1" />
    <title>css布局</title>
  </head>
  <style>
    .body {
      background-color: wheat;
    }
    .content {
      background-color: wheat;
    }

    .float_wrap {
      overflow: hidden;
      background-color: aqua;
    }
    .float_left {
      width: 200px;
      float: left;
      background: #345;
    }
    .float_right {
      width: 100px;
      float: right;
      background: red;
    }
    .float_content {
      background: #887;
      margin-left: 200px;
      margin-right: 100px;
    }

    .bfc_wrap {
      overflow: hidden;
      background-color: aqua;
    }
    .bfc_left {
      float: left;
      background: #345;
      width: auto;
    }
    .bfc_right {
      float: right;
      background: red;
      width: auto;
      max-width: 200px;
    }
    .bfc_content {
      overflow: auto;
      background: #887;
    }

    .table_wrap {
      display: table;
      width: 100%;
      background-color: aqua;
    }
    .table_left {
      display: table-cell;
      /* width: 100px; */
      white-space: nowrap;
      background: #345;
    }
    .table_right {
      display: table-cell;
      width: 100px;
      background: red;
    }
    .table_content {
      display: table-cell;
      background: #887;
    }
  </style>
  <body style="margin: 0px; height: 100%; background-color: rgb(14, 14, 14)">
    <div class="content">
      <h1>float 注意点--需要固定的左侧和右侧width固定</h1>
      <div class="float_wrap">
        <div class="float_left">我是左侧:</div>
        <div class="float_right">我是右侧:</div>
        <div class="float_content">
          我是右侧————浪费时间开始看费时费力手机阿拉基算啦估计是老大国际龙受打击发啦受打击发啦手机大发拉卡萨激发了手机放大立卡手机大发立卡手机大发舒服了科技师范老实交代立卡飞机手打拉法基失蜡法进啦手机发啦手机打发啦手机
        </div>
      </div>
      <h1>
        bfc
        注意点--左侧和右侧不需要固定的宽，但是左侧和右侧宽度太长，会导致content换行，可以使用max-width
        控制
      </h1>
      <div class="bfc_wrap">
        <div class="bfc_left">我是左侧:</div>
        <div class="bfc_right">
          我是右侧:收到廊坊市两地分居上课啦飞机少溜达飞机上老大飞机上老大飞机了受打击发撒溜达鸡发啦手打
        </div>
        <div class="bfc_content">
          我是右侧————浪费时间开始看费时费力手机阿拉基算啦估计是老大国际龙受打击发啦受打击发啦手机大发拉卡萨激发了手机放大立卡手机大发立卡手机大发舒服了科技师范老实交代立卡飞机手打拉法基失蜡法进啦手机发啦手机打发啦手机
        </div>
      </div>
      <h1>
        table
        注意点--左侧和右侧不需要固定的宽，但是左侧和右侧宽度不好控制，如果是单行不想被挤压换行，可以使用white-space:
        nowrap;
      </h1>
      <div class="table_wrap">
        <div class="table_left">
          <div><p>我是左侧:</p></div>
        </div>
        <div class="table_content">
          我是右侧————浪费时间开始看费时费力手机阿拉基算啦估计是老大国际龙受打击发啦受打击发啦手机大发拉卡萨激发了手机放大立卡手机大发立卡手机大发舒服了科技师范老实交代立卡飞机手打拉法基失蜡法进啦手机发啦手机打发啦手机
        </div>
        <div class="table_right">我是右侧:</div>
      </div>
    </div>
  </body>
</html>
